<template>
    <div v-if="Object.keys(detailInfo).length !== 0" class="goods-info">
      <div class="info-desc clear-fix">
        <div class="start">
        </div>
          <div class="desc">{{ detailInfo.desc }}</div>
          <div class="end"></div>
        </div>
        <div class="info-key">{{ detailInfo.detailImage[2].key }}</div>
        <div class="info-list">
          <img v-for="(item,index) in detailInfo.detailImage[0].list" :key="index"
               :src="item" @load="imgLoad" alt="">
        </div>
    </div>
</template>

<script>
    export default {
        name: "GoodsListItem",
      props:{
          detailInfo:{
            //监听这个对象的变化watch
            type:Object
          }
      },
      data(){
          return{
            counter:0,
            imagesLength:0
          }
      },
      methods:{
        imgLoad(){
          //先加后对比
          if(++this.counter === this.imagesLength){
            this.$bus.$emit('imageLoad')

          }
        }
      },
      watch:{
        detailInfo(){
          this.imagesLength = this.detailInfo.detailImage[0].list.length
        }
      }
    }
</script>

<style scoped>
  .goods-info{position: relative;}

  .goods-info .info-list{
    position: relative;
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;
  }
  .goods-info .info-list img{width:45%;padding-left: 7%;padding-top: 4%}
</style>
